<template>
  <div class="list_items">
    <div class="item_col">
      <div class="value">
        执行人
      </div>
      <div class="label">
        {{ data.SY_CREATEUSERNAME }}
        <span class="department">({{ data.SY_CREATEORGNAME }})</span>
        <span
          v-html="getStatues()"
          class="statues-wrp"
        />
      </div>
    </div>
    <div class="item_col">
      <div class="value">
        领取时间
      </div>
      <div class="label">
        {{ changeDateType(data.JOBMX_LQSJ) }}
      </div>
    </div>
    <div class="item_col">
      <div class="value">
        完成时间
      </div>
      <div class="label">
        {{ changeDateType(data.JOBMX_WCSJ) }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TransactionDetailItems',
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    // 修改日期格式
    changeDateType(date) {
      if (!date) return;
      const ymd = date.split(' ')[0];
      const h = date.split(' ')[1].split(':')[0];
      return `${ymd} ${h}点`;
    },
    // 获取任务状态
    getStatues() {
      // JOBMX_LQSJ-领取时间，JOBMX_WCSJ-完成时间
      let cls = '';
      let txt = '';

      if (this.data.JOBMX_LQSJ) {
        cls = 'lq';
        txt = '领取';
      }
      if (this.data.JOBMX_WCSJ) {
        cls = 'wc';
        txt = '完成';
      }
      if (cls) {
        return `<span class="statues ${cls}">${txt}</span>`;
      }
      return '';
    },
  },
};
</script>

<style lang="less">
  @import "~@/theme/index.less";
  .list_items {
    padding: 10px 0;
    border-bottom: 1px solid rgba(245,245,245,1);
    .item_col {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 4 * @hd;
      margin-top: 4 * @hd;
      .value {
        font-size: 14 * @hd;
        color: #A9ABA9;
        width: 70 * @hd;
      }
      .label {
        font-size: 15 * @hd;
        flex: 1;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        .department {
          font-size: 11 * @hd;
          margin-left: 5px;
        }
        .statues-wrp {
          .statues {
            font-size: 1 * @hd;
            color: #ffffff;
            padding: 1px 10 * @hd;
            border-radius:4px;
            transform: scale(0.6);
            display: block;
            &.lq {
              padding: 2 * @hd;
              background:rgba(40,140,78,1);
              border-color: rgba(40,140,78,1);
            }
            &.wc {
              padding: 2 * @hd;
              background: rgba(241,155,44,1);
              border-color: rgba(241,155,44,1);
            }
          }
        }
      }
    }
  }
</style>
